<script setup>
import { ref,defineEmits,watch } from 'vue'
import { userGetAccountInfoService} from '@/api/user'
import { upload} from '@/api/request'
const imgUrl = ref('')

const form = ref({})
const getUserInfo=async()=>
{
 const res= await userGetAccountInfoService(1)
 form.value=res.data.data
 imgUrl.value = form.value.avatar
 console.log('---------------------',imgUrl.value);
 console.log('个人信息',res.data.data);
}
getUserInfo()



const emit=defineEmits(['getImg'])
const backImg=()=>{
  emit('getImg',imgUrl.value)
}
watch(imgUrl,(old,newValue)=>{
    backImg()
})



const avatarUpload= async (file) =>{

  const formData = new FormData();

  formData.append('file',file)

  const res = await upload(formData)

  console.log("后端响应",res)

  const url = res.data.data
  imgUrl.value = url
}
</script>

<template>
  <el-upload
    class="avatar-uploader"
    :show-file-list="false"
    :before-upload="avatarUpload"
  >
  <div class="user">
    <img :src="imgUrl" class="avatar" />
  </div>
  </el-upload>
</template>
<style lang="scss" scoped>
.user {
  width:100px;
  height:100px;
  img{
    width:100%;
    height: 100%;
    border-radius:100%;
  }
}
</style>